<div class="Notifications">
    <div class="ui two column grid">
        <div class="four wide column">
            <div class="ui fluid vertical steps">
                <div class="step pointing" [class.active]="tab === 'newNotification'" (click)="openNewNotifArea()">
                    <div class="title">
                        {{'workflow_notification_form' | translate }}
                    </div>
                </div>
                <ng-container *ngFor="let n of workflow.notifications; let i = index">
                    <div class="step pointing" [class.active]="selectedNotification === i" (click)="openEditionArea(i)">
                        <div class="content full">
                            <div class="title">
                                {{n.type}}
                                <div class="ui right floated">
                                    <i class="copy icon pointing" title="{{ 'workflow_notification_copy' | translate}}"
                                        (click)="copy(i); $event.stopPropagation();"></i>
                                </div>
                            </div>
                            <div class="description">
                                <ng-container *ngFor="let node of mapNodesNotif.get(n.id); let i = index">
                                    <span *ngIf="i > 0">{{'/'}}</span>
                                    {{ node }}
                                </ng-container>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </div>
            <div class="ui fluid vertical steps">
                <div class="step pointing" [class.active]="tab === 'newEvent'" (click)="openNewEventArea()">
                    <div class="title">
                        {{'workflow_event_form' | translate }}
                    </div>
                </div>
            </div>
        </div>
        <div class="twelve wide column">
            <ng-container *ngIf="selectedNotification != null">
                <app-workflow-notifications-form [project]="project" [workflow]="workflow"
                    [notification]="workflow.notifications[selectedNotification]" [loading]="loading"
                    (updatedNotification)="updateNotification($event)"
                    (deleteNotificationEvent)="deleteNotification($event)" [canDelete]="true">
                </app-workflow-notifications-form>
            </ng-container>
            <ng-container *ngIf="tab === 'newNotification' && !loadingNotifTemplate">
                <app-workflow-notifications-form [project]="project" [workflow]="workflow" [loading]="loading"
                    [canDelete]="false" [notification]="newNotification"
                    (updatedNotification)="createNotification($event)"></app-workflow-notifications-form>
            </ng-container>
            <ng-container *ngIf="tab === 'newEvent'">
                <div class="ui form">
                    <div class="field">
                        <div markdown [data]="'workflow_event_explanation' | translate"></div>
                    </div>
                    <div class="fields">
                        <div class="fifteen wide field" *ngIf="eventIntegrations && eventIntegrations.length > 0">
                            <sui-select class="selection" [(ngModel)]="selectedIntegration"
                                [options]="eventIntegrations" labelField="name" [isSearchable]="true" #select>
                                <sui-select-option *ngFor="let option of select.filteredOptions" [value]="option">
                                </sui-select-option>
                            </sui-select>
                        </div>
                        <div class="fifteen wide field center ui info message"
                            *ngIf="!eventIntegrations || eventIntegrations.length === 0">
                            {{'workflow_no_event_integration' | translate }} <a
                                href="https://ovh.github.io/cds/docs/concepts/workflow/notifications/"
                                target="_blank">{{'common_click_more_informations' | translate }}</a>
                        </div>
                        <div class="one wide field" *ngIf="eventIntegrations && eventIntegrations.length > 0">
                            <button class="ui blue icon button right floated" [class.loading]="loading"
                                [class.disabled]="!selectedIntegration || loading || (workflow.from_repository &&
                                workflow.from_repository.length > 0)" (click)="addEvent(selectedIntegration)">
                                <i class="plus icon"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="ui row">
                    <div class="ui sixteen wide column">
                        <div class="ui middle aligned celled list"
                            *ngIf="workflow.event_integrations && workflow.event_integrations.length > 0">
                            <div class="item" *ngFor="let eventIntegration of workflow.event_integrations">
                                <div class="right floated content">
                                    <app-delete-button type="icon" [loading]="loading"
                                        (event)="deleteEvent(eventIntegration)">
                                    </app-delete-button>
                                </div>
                                <div class="middle aligned content intname">
                                    {{eventIntegration.name}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-container>
        </div>
    </div>
</div>
